<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			{{propertyName}}
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			服务站管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-community-line" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="community-line"></i-icon> -->
				{{propertyName}}-服务站列表
			</view>
			<button class="r30" type="button" @click="getStationList()">添加服务站</button>
		</view>
		<view class="">
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th></th>
					<th>名称</th>
					<th>地址</th>
					<th>站长</th>
					<th>联系电话</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in tree">
					<td>{{item.id}}</td>
					<td>{{item.villageName}}</td>
					<td>{{item.villageAddress}}</td>
					<td>{{item.villageAgent}}</td>
					<td>{{item.phone}}</td>
					<td class="bc">
						<button class="b-dell" @click="show(item)">删除</button>
					</td>
				</tr>
				<tr v-if="total<=0">
					<td colspan="6">数据为空</td>
				</tr>
			</table>
			<view>
				<text v-if="current>1">上一页</text>
				<text>{{current}}</text>
				<text v-if="current<pages">下一页</text>
				<select v-model="size" @change="alterSize()">
					<option value="10">10条/页</option>
					<option value="20">20条/页</option>
					<option value="30">30条/页</option>
					<option value="50">50条/页</option>
					<option value="100">100条/页</option>
				</select>
				<text>共{{pages}}页{{total}}条</text>
			</view>
		</view>
		<view v-if="view==1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-settings-line" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="settings-line" class="r10"></i-icon> -->
						添加服务站
					</view>
					<i class="ri-close-line" style="color:#f73164;font-size:12px;" @click="view=0"></i>
					<!-- <i-icon size="20upx" color="#f73164" name="close-line" @click="view=0"></i-icon> -->
				</view>
				<view class="com">
					<table class="pure-table pure-table-horizontal">
						<tr>
							<th></th>
							<th>名称</th>
							<th>地址</th>
							<th>站长</th>
							<th>联系电话</th>
							<th>操作</th>
						</tr>
						<tr v-for="(item,index) in station.tree">
							<td>{{item.id}}</td>
							<td>{{item.villageName}}</td>
							<td>{{item.villageAddress}}</td>
							<td>{{item.villageAgent}}</td>
							<td>{{item.phone}}</td>
							<td class="bc">
								<button class="b-dell" @click="addNode(item)">添加</button>
							</td>
						</tr>
						<tr v-if="station.total<=0">
							<td colspan="6">数据为空</td>
						</tr>
					</table>
					<view>
						<text v-if="station.current>1">上一页</text>
						<text>{{station.current}}</text>
						<text v-if="current<station.pages">下一页</text>
						<select v-model="station.size" @change="getStationList()">
							<option value="10">10条/页</option>
							<option value="20">20条/页</option>
							<option value="30">30条/页</option>
							<option value="50">50条/页</option>
							<option value="100">100条/页</option>
							<option :value="station.size">{{station.size}}条/页</option>
						</select>
						<text>共{{station.pages}}页{{station.total}}条</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				propertyId: 1,
				propertyName: '南湖物业',
				tree: [],
				node: {},
				pages: 0,
				total: 0,
				current: 1,
				size: 100,
				view: 0,
				station: {
					tree: [],
					node: {},
					pages: 0,
					total: 0,
					current: 1,
					size: 100
				}
			}
		},
		methods: {
			init(propertyId) {
				let _this = this
				this.httpRequest({
					url: '/property/station/list?propertyId=' + propertyId,
					method: 'GET',
					fn(data) {
						_this.tree = data.records
						console.log(_this.tree)
						_this.pages = data.pages
						_this.total = data.total
						_this.current = data.current
						_this.size = data.size
					}
				})
			},
			showStationList() {

			},
			addNode(item) {
				let _this = this
				this.httpRequest({
					url: '/property/station/add',
					method: 'POST',
					data: {
						propertyId: _this.propertyId,
						serviceStationName: item.villageName
					},
					fn(data) {
						uni.showToast({
							title: '添加成功',
							success() {
								_this.view = 0
								_this.init(_this.propertyId)
							}
						})
					}
				})
			},
			delNode(item) {
				uni.showModal({
					content: '确认要删除吗？',
					success(res) {
						if (res.confirm) {
							console.log(item)
						}
					}
				})
			},
			alterSize() {
				console.log(this.size)
			},
			getStationList() {
				this.view = 1
				let _this = this
				this.httpRequest({
					url: '/guiminSite/list',
					method: 'POST',
					fn(data) {
						console.log(data)
						_this.station.tree = data
						_this.station.pages = 1
						_this.station.total = data.length
						_this.station.current = 1
						_this.station.size = data.length
					}
				})
			}
		},
		onLoad(p) {
			//传入物业id
			this.init(p.propertyId || "1")
		}
	}
</script>

<style>

</style>
